<script setup>


defineProps({
  message: {
    type: Object,
    required: true
  }
});
</script>

<template>
  <div :class="['message', message.type]">
    <div class="avatar">
      <div class="avatar-inner">{{ message.type === 'ai' ? 'AI' : '我' }}</div>
    </div>
    <McBubble
      :content="message.content"
      :type="message.type === 'ai' ? 'primary' : 'success'"
    ></McBubble>
  </div>
</template>

<style scoped>
.message {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.message.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  flex-shrink: 0;
}

.message.ai .avatar {
  background-color: #1890ff;
  color: white;
}

.message.user .avatar {
  background-color: #52c41a;
  color: white;
}

.avatar-inner {
  font-size: 14px;
  font-weight: bold;
}
</style>